/*
* @Autor: Mr Lu
* @Version: 1.0
* @Date: 2019-12-03
* @LastEditors: OBKoro1
* @LastEditTime: 2019-12-03
* @Description:  DutyAreaPlan
*/
<template>
  <div id="DutyAreaPlan" class="p-box">
    <div class="p-return">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" @click="backNow">
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        责任区域平面图
      </mu-appbar>
    </div>
    <div v-if="detail.id" style="height:calc(100vh - .45rem);overflow: auto;background: #fff">
      <div class="lan-detail-list">
        <span class="lan-detail-h">项目名称</span>
        <span class="lan-detail-r">{{detail.projectName}}</span>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">区域</span>
        <span class="lan-detail-r">{{detail.areaName}}</span>
      </div>
      <div class="lan-detail-list">
        <div class="lan-detail-list-box" style="width: 100%;">
          <div class="ly_flex ly_flex_just_between ly_flex_ali_center">
            <span class="lan-detail-h"> 隐藏标号<mu-switch class="demo-picker-form" v-model="markSwitch"></mu-switch></span>
            <span class="lan-detail-r">
               <mu-button small color="primary" @click="gotoHistory" v-if="this.activePoint">历史记录</mu-button>
            </span>
          </div>
          <div class="img-box">
            <MapShow :width="'100%'" :url="detail.photoUrl" :points="points" @click="pointListClick" enableClick
                     :showPoint="!markSwitch" readonly></MapShow>
          </div>
        </div>
      </div>
      <div class="lan-detail-list" v-if="measureLists.length" v-for="(measure, index) in measureLists" :key="index">
        <div class="lan-detail-list-box" style="width: 100%;">
          <div class="ly_flex ly_flex_just_between ly_flex_ali_center">
            <span class="lan-detail-h">实测点位{{ this.activePoint ? this.activePoint : index + 1}}</span>
          </div>
          <div class="ly_flex ly_flex_just_between ly_flex_ali_center">
            <span class="lan-detail-h">点位总体测量结果：{{measure.isAllQualify == 1?'合格':'不合格'}}</span>
          </div>
          <div class="img-box">
            <table class="custom-table" style="border: 1px solid #E0E0E0">
              <tr>
                <th style="width: 1.07rem;">实测分项</th>
                <th style="width: .8rem;">实测内容</th>
                <th style="width: .8rem;">数值</th>
                <th style="width: .8rem;">结果</th>
              </tr>
              <tr v-if="measure.messList.length"  v-for="(meas, index) in measure.messList" :key="index">
                <td style="width: 1.07rem;">{{meas.subentryName}}</td>
                <td style="width: .8rem;">{{meas.content}}</td>
                <td style="width: .8rem;">{{meas.value}}</td>
                <td style="width: .8rem;">{{meas.result == '1' ? '合格' : '不合格'}}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="height:calc(100vh - .45rem);overflow: auto;background: #fff" class="ly_flex ly_flex_ali_center ly_flex_just_center">
      <NoData />
    </div>
    <SelectArea v-if="area.open" :open="area.open" v-model="area.checked" :currentProject="area.currentProject" @change="areaChange"
                @close="closeAreaDialog" @confirm="areaConfirm"></SelectArea>
    <Org v-if="orgDialog" ref="org" v-model="org" orgType="currOrgProject" @change="orgChange"
         :open="orgDialog" @open="openOrgDialog" @close="closeOrgDialog" @confirm="orgConfirm"
    ></Org>
  </div>
</template>

<script>
  import Org from "@/select/org/Org.vue"
  import SelectArea from "@/select/area/Area.vue"

  export default {
    name: "DutyAreaPlan",
    components: {
      SelectArea,
      Org
    },
    data() {
      return {
        api: {
          getAreaDetailApi: '/safety/measure/areaAndPointList', // 获取实测实量台账
        },
        // 组织弹窗状态
        orgDialog: false,
        // 组织
        org: [],
        detail: {},
        markSwitch: false,
        currentOrg: {},
        // 区域选择相关
        area: {
          currentProject: {},
          // 区域选择弹窗状态
          open: false,
          // 选择结果
          checked: {},
          form: {}
        },
        activePoint: '',
        points: [],
        measureLists: [],
        areaId: ''
      };
    },
    computed: {},
    created() {
      let aa = JSON.parse(sessionStorage.getItem('areaInfoData') || null)
      if(aa){
        this.area.checked = aa
        this.currentOrg = JSON.parse(sessionStorage.getItem('orgInfoData') || null)
        this.org = [this.currentOrg]
        console.log(this.currentOrg)
        this.getAreaDetail(this.area.checked)
      }else{
        let orgInfo = this.$A.GS("orgInfo");
        this.currentOrg.type = orgInfo.type
        this.currentOrg.value = orgInfo.orgId
        this.currentOrg.label = orgInfo.label
        this.org = [this.currentOrg]
        if (this.currentOrg.type == '1') {
          // this.getAreaDetail(this.area.checked)
          this.orgConfirm()
        } else {
          this.orgDialog = true
        }
      }
    },
    mounted() {
    },
    watch: {},
    methods: {
      skipPage(item) {
        this.$router.push({
          name: item.path
        });
      },
      handurl(str) {
        if (!str) {
          return []
        } else {
          return str.split(',')
        }
      },
      // 组织选择
      orgChange() {
        // alert(this.org[0].label)
        // this.form.projectId = this.org[0].value
        // this.form.type = this.org[0].type
      },
      // 区域选择
      areaChange() {
      },
      // 打开组织选择弹窗
      openOrgDialog() {
        this.orgDialog = true
      },
      // 关闭组织选择弹窗
      closeOrgDialog() {
        this.orgDialog = false
        this.$router.back()
      },
      backNow(){
        sessionStorage.removeItem('areaInfoData')
        sessionStorage.removeItem('orgInfoData')
        this.area.open = true
      },
      // 组织选择结果确认
      orgConfirm() {
        this.currentOrg.value = this.org[0].value
        this.area.currentProject = this.org[0]
        this.orgDialog = false
        this.openAreaDialog()
      },
      // 打开区域选择
      openAreaDialog() {
        this.area.open = true
      },
      // 关闭区域选择
      closeAreaDialog() {
        this.area.open = false
        let orgInfo = this.$A.GS("orgInfo");
        if (orgInfo.type == '1') {
          this.$router.back()
        } else {
          this.orgDialog = true
        }
        
        // this.$router.back()
        // this.openOrgDialog()
      },
      // 区域选择结果确认
      areaConfirm() {
        this.area.open = false
        this.getAreaDetail(this.area.checked)
      },
      pointListClick(ev) {
        this.activePoint = ev.pIndex
        this.measureLists = [this.measureLists[this.activePoint - 1]]
      },
      // 获取详情
      getAreaDetail(area) {
        this.$openLoading()
        this.$A
          .Go("post", this.api.getAreaDetailApi, {areaId: area.id,  projectId :this.currentOrg.value})
          .then(response => {
            this.$closeLoading()
            Util.processRes(response, () => {
              this.detail = response.body ;
              this.points = this.dealPoints(response.body.list)
              this.measureLists = response.body.list
            });
            Util.processError(this, response);
          })
          .catch(err => {
            this.$closeLoading()
            console.log(err);
          });
      },
      // 处理点
      dealPoints(data) {
        let arr = []
        data.length && data.forEach(point => {
          let obj = {}
          obj['left'] = point.coord.split(',')[0]
          obj['top'] = point.coord.split(',')[1]
          obj['lng'] = point.coord.split(',')[0]
          obj['lat'] = point.coord.split(',')[1]
          obj['areaId'] = point.areaId
          arr.push(obj)
        })
        return arr
      },
      // 点位标记历史记录
      gotoHistory() {
        this.areaId = this.points[Number(this.activePoint) - 1 ].areaId
        sessionStorage.setItem('areaInfoData',JSON.stringify(this.area.checked))
        sessionStorage.setItem('orgInfoData',JSON.stringify(this.currentOrg))
        this.$router.push({
          name: 'MeasureHistory',
          query: {areaId : this.areaId,index: this.activePoint,point: this.detail.list[this.activePoint - 1].coord, projectId:this.currentOrg.value}
        })
      }
    },
    destroyed() {
    }
  };
</script>

<style lang="scss">
  #DutyAreaPlan {
  }
</style>
